<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<style>
  .wave {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
  }

  .wave img {
    width: 400%;
    position: relative;

  }

  @keyframes rowup {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .wave img {
    animation: rowup 8s linear infinite;
    -moz-animation: rowup 8s linear infinite;
    -webkit-animation: rowup 8s linear infinite;
    -o-animation: rowup 8s linear infinite;
  }


</style>
<body>
<div class="bg"></div>
<div id="app">
  <van-row>
    <van-col span="24">
      <div class="box m-4" style="background: linear-gradient(to right, #4bb0ff, #aa9cff)">
        <div class="d-flex align-items-center">
          <div class="p-3">
            <van-image
              round
              width="60"
              height="60"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </div>
          <div class="color-white ml-3 d-flex align-items-center">
            <span>aaa</span>
            <span><van-icon name="edit" size="12"/></span>
          </div>
        </div>
        <div class="wave">
          <img src="../image/wave.png">
        </div>
      </div>
    </van-col>
    <van-col span="24">
      <div class="box ml-4 mr-4">
        <ul class="my-list">
          <li @click="toHealthData">
            <van-icon name="like" color="#ff7070"></van-icon>
            <span class="ml-2">健康资料</span>
          </li>
          <li @click="toHealthRecord">
            <van-icon class="color-main" name="column"></van-icon>
            <span class="ml-2">健康方案</span>
          </li>
          <li>
            <van-icon name="../image/icon.png"></van-icon>
            <span class="ml-2">我的食物</span>
          </li>
          <li>
            <van-icon name="../image/icon2.png"></van-icon>
            <span class="ml-2">我的运动</span>
          </li>
        </ul>
      </div>
    </van-col>
    <van-col span="24">
      <div style="height: 80px;"></div>
      <div class="fixed-bottom p-2 bg-white" style="box-sizing: border-box">
        <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block @click="toIndex">主页</van-button>
      </div>
    </van-col>
  </van-row>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {};
    },
    methods: {
      onClickLeft() {
        window.location.href = "../jumpto/toIndex";
        console.log("hello");
        Toast('返回');
      },
      onSubmit(values) {
        console.log('submit', values);
      },
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      showPopup() {
        this.show = true;
      },
      toHealthData() {
        window.location.href = "../personUser/toHealtheyData";
      },
      toIndex() {
        window.location.href = "../jumpto/toIndex";
      },
      toHealthRecord() {

      },
    },
  });
</script>
</html>
